import {useEffect} from 'react';
import {MVTImageryProvider} from './utils/MVTImageryProvider'
import './App.css';

const {Viewer,Cartesian3,GeographicTilingScheme} = Cesium

function App() {
  useEffect(()=>{
    if (!window.viewer){
      initCesium()
    }
  },[])
  const initCesium = ()=>{
    window.viewer = new Viewer('cesiumContainer',{
      infoBox:false
    })
    window.viewer.camera.setView({
      destination: Cartesian3.fromDegrees(115.24658136069775, 30.544326851225964, 1000.0), //设置位置
    });

    setTimeout(()=>{
      MVTImageryProvider.fromUrl('/style/style.json').then(provider => {

        provider.tilingScheme = new GeographicTilingScheme()
        provider.tileSize = 512
        provider.tileWidth = 512
        provider.tileHeight = 512

        const imageryLayer = window.viewer.imageryLayers.addImageryProvider(provider);
      });
    })
  }
  return (
    <div className="App">
      <div id={'cesiumContainer'}></div>
    </div>
  );
}

export default App;
